<script>
// 组名编辑弹窗
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Detail',
})
</script>
<script setup>
import Upload from '@/components/app/upload.vue'
import { customerDataList } from '@/data'
import { deepClone, isEmpty,customerStatus } from '@/utils'
import { ref, defineExpose, reactive } from 'vue'
import { toRaw } from '@vue/reactivity'
import { ElMessageBox } from 'element-plus'
import {
  postDataQrTableDetail
} from '@/api'
// import Detail1 from '@/pages/wework/customer/detail/index.vue'
import Detail1 from '@/components/app/customerDetail/index.vue'
const dialogVisible1 =  ref(true)
const detail1 = ref(null)

const showDetail = (val)=>{
  dialogVisible1.value = false
  console.log(val)
	setTimeout(()=>{
  	detail1.value.show(val.customer.id)
	},5)
}
const isRefresh = ref(true)
const handleRefresh = () => {
  isRefresh.value = false
  isRefresh.value = true
}
const form = ref()
let temp = {
  num:1,
  time:'2020-11-08'
}
form.value = temp
const tableData = ref()
const dialogVisible = ref(false)

const queryForm = ref({
		type:'',
    staffs:[],
    time:'',
    dtime:'',
    date_type:''
})

const show = async (type,val,data) => {
  console.log(data)
  queryForm.value = {
		type:'',
    staffs:[],
    time:data.ktime,
    // dtime:'2022-11-19',
    dtime:data.dtime,
    date_type:data.date_type
}
  if(type=='times'){
    queryForm.value.time= val
  }else{
    console.log(val,'asdasdasd')
    queryForm.value.staffs= [val]
  }
  await getData()
  dialogVisible.value = true
}
const getData = async()=>{
  const r = await postDataQrTableDetail(queryForm.value)
  if (r){
    tableData.value = r.data
  }
}

const cancel = (done) => {
  dialogVisible.value = false
}

const emits = defineEmits(['getDialogueData'])
defineExpose({
  show,
})
</script>
<template>
  <div v-if="dialogVisible">
    <el-dialog
      v-model="dialogVisible"
      title="查看详情"
      width="1000px"
      :before-close="cancel"
    >
    <Detail1 v-if="!dialogVisible1" ref="detail1" @diaUpdate="dialogVisible1=true;getData()" />
    <div v-else>
    <div class="app-flex-left">
			<el-radio-group @change="getData" v-model="queryForm.type" size="large">
        <el-radio-button label="" >邀请客户总数</el-radio-button>
        <el-radio-button label="1" >新增客户数</el-radio-button>
        <el-radio-button label="2" >流失客户数</el-radio-button>
		</el-radio-group>
		</div>
    <div class="app-gap-block-top">
    共{{ tableData.length }}个客户
    </div>
    <div class="app-gap-block-top">
					<el-table class="app-select-table app-container-radius" :data="tableData" style="width:100%">
						<el-table-column width="140" prop="createTime" label="全部客户" align="left">
              <template #default="scope">
                <div class="app-flex-left" v-if="scope.row.customer">
                <el-avatar
                          class="cho-margin"
                          shape="square"
                          :size="30"
                          :src="scope.row.customer.avatar"
                        />
                <span class="app-gap-words-left">
                {{ scope.row.customer.name }}
                </span>
                </div>
						</template>
					</el-table-column>
          <el-table-column label="所属客服" align="left">
              <template #default="scope">
                <div class="app-flex-left" v-if="scope.row.staff">
                <el-avatar
                          class="cho-margin"
                          shape="square"
                          :size="30"
                          :src="scope.row.staff.avatar"
                        />
                <span class="app-gap-words-left">
                {{ scope.row.staff.name }}
                </span>
                </div>
						</template>
					</el-table-column>
              <el-table-column label="客户评分" align="left">
              <template #default="scope">
                <div class="app-flex-left">
                <el-tag type="primary">
                   <div class="app-flex-left">
                   <div>
                 <MyIcon class="app-icon app-primary-font" name="Star" />
                </div>
                 <div class="app-gap-words-left-xs">
                
                 <span class="" v-if="scope.row.customer">
                {{ scope.row.customer.score }}
               
                </span>
                <div class="app-star-bottom"></div>
                 </div>

                </div>
                </el-tag>
                </div>
						</template>
          </el-table-column>
           <el-table-column label="添加渠道" prop="customer.add_way" align="left">
          </el-table-column>
           <el-table-column label="标签" align="left">
              <template #default="scope">
                <div class="" v-if="scope.row.customer">
                  <span v-for="item in scope.row.customer.tags">
          <el-popover v-if="item.deleted==0"

											popper-style="padding: 10px;min-width:0px"
											placement="right"
											:width="100"
											trigger="hover"
										>
											<div>已删除</div>
											<template #reference>
												<el-tag :type="item.deleted==1?'':'info'" class="app-br-10">
                            <span class="app-regular-font" >{{item.tag_name}}</span>
                      </el-tag>
											</template>
										</el-popover>

          <el-tag v-else :type="item.deleted==1?'':'info'" class="app-br-10" >
								<span class="app-regular-font" >{{item.tag_name}}</span>
          </el-tag>
        </span>
<!--                   
                  <el-tag class="app-br-10" v-for="(item,index) in scope.row.customer.tags" :key="index">
                  <span class="app-regular-font ">{{item}}</span>
                  </el-tag> -->
           
                </div>
						</template>
          </el-table-column>
          <el-table-column label="添加时间" prop="customer.createtime" align="left">
          </el-table-column>
           <!-- <el-table-column width="140" label="上次对话时间" prop="lastchatTime" align="left">
          </el-table-column> -->
           
           <el-table-column label="操作" align="left">
              <template #default="scope">
                <div  class="primary-font app-pointer app-flex-left" @click="showDetail(scope.row)">
                
                  查看详情
                </div>
						</template>
          </el-table-column>
						
					</el-table>
			</div>
    </div>
    
    </el-dialog>
  </div>
</template>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
